import React, { useCallback } from 'react'
import stopSong from '@/assets/fonts/music/stopSong.svg'
import { PlayList } from '@/modules/MusicList'

function ContentMyLoveMusicHeader({song}:{song:PlayList}) {
    console.log(song)
    const imgUrl = useCallback(()=>{
        if(Object.keys(song).length != 0){
            console.log(song)
            return <img src={song.creator.avatarUrl} alt="" />
        }else{
            return <img src='src/assets/王冰冰.jpg' alt="" />
        }
    },[song])

    const songTags = useCallback(()=>{
        if(Object.keys(song).length != 0){
            console.log(song)
            return (
                song.tags.map((item,index)=>{
                    return(
                        <p key={index} style={{marginRight:'5px'}}>
                        {
                            index >= 1 ? `/  ${item}` : item
                        }
                      </p>  
                    )
                })
            )
        }else{
            return <p></p>
        }
    },[song])

  return (
    <div className='loveMusic'>
        <div className='loveMusic-left'>
            <img src={song.coverImgUrl} alt="" />
        </div>
        <div className="loveMusic-right">
            <ul>
                <li>{song.name}</li>
                <li>
                    {
                       imgUrl()
                    }
                    <span style={{marginRight:'10px'}}>wenpans</span>
                    <span>2020-10-06创建</span>
                </li>
                <li className='playAll'>
                    <button>
                        <img src={stopSong} alt="" />
                        播放全部
                    </button>
                    <button>收藏</button>
                    <button>分享</button>
                    <button>VIP下载</button>
                </li>
                <li>
                    标签：
                    {
                       songTags()
                    }
                </li>
                <li>
                    <span style={{marginRight:'10px'}}>
                        歌曲：{song.trackCount}
                    </span>
                    <span>
                        播放：{song.playCount}
                    </span>
                </li>
                <li>
                    简介：添加简介
                </li>
            </ul>
        </div>
    </div>
  )
}

export default React.memo(ContentMyLoveMusicHeader)